<style type="text/css">
	.customer {overflow: hidden;display: inline-block;height: 30px;margin: 3px;border-radius: 3px;background-color: #e74c3c;color: #fafafa;cursor: pointer;line-height: 30px;}
	.customer span {display: inline-block;height: 100%;vertical-align: bottom;}
	.customer .func {position: relative;width: 30px;background-color: #c0392b;margin: 0;}
	.customer .func:after, .customer .func:before {content: "\20";display: block;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;height: 15px;width: 1px;background-color: #fafafa;transform: rotate(45deg);}
	.customer .func:before {transform: rotate(-45deg);}
	.addcustomer {background-color: #3498db;}
	.addcustomer .func:after {transform: rotate(0deg);} 
	.addcustomer .func:before {transform: rotate(90deg);}
	.addcustomer .func {background-color: #2980b9;}
	.condition span {display: inline-block;padding: 5px;border-radius: 3px;background: #eee;color: #666 !important;cursor: pointer;border: 1px currentColor solid;}
	.condition span.on {color: #e67e22 !important;}
	.drop-down {position: absolute;left: 10px;top: 40px;width: calc(95% - 20px);max-height: 250px;line-height: 30px;z-index: 1;color: #000;background-color: #fff;overflow-y: auto;border: 1px solid #eee;}
	.drop-down div {border-top: 1px solid #eee;padding: 0 5px;cursor: pointer;}
	.drop-down div:hover {background-color: #ddd;}
</style>
{{template "admin/public/head.html" .}}
<section>
	<aside>
		{{template "admin/public/nav.html" .}}
	</aside>
	<article>
		<div class="top-title">
			<dl>
				<dt><h1>{{.title}}</h1></dt>
				<dd>&nbsp;</dd>
				<dd><a href="user_chat.html"><i class="iconfont">&#xe649;</i>帮助文档</a></dd>
			</dl>
		</div>

		<div class="content">
			<div class="release">
				<dl>
					<dt><i class="iconfont">&#xe649;</i> <b>{{.title}}说明</b><br>
						<p></p>
					</dt>
					<!-- <dd><a href="/admin/member/add"><button type="button" class="button">添加会员</button></a></dd> -->
				</dl>
			</div>
			<form class="form">
				<table class="table1">
					<!-- 控制表格宽度  横向合并 colspan="1"  竖向合并 rowspan="3" -->
					<thead><th width="8%"></th><th width="17%"></th><th width="8%"></th><th width="17%"></th><th width="8%"></th><th width="17%"></th><th width="8%"></th><th width="17%"></th></thead>
					{{if .info}}
					<tr>
						<td rowspan="3" colspan="2" class="center"><img src="{{if .info.pathname}}{{.info.pathname}}{{else}}/static/img/admin/avatar.jpg{{end}}" class="uppic img-3"></td>
						<td class="genre">昵称</td>
						<td>{{.info.monicker}}
						<td class="genre">名字</td>
						<td>{{.info.name}}
						<td class="genre">性别</td>
						<td>
							{{if eq .info.sex "0"}}保密{{else if eq .info.sex "1"}}男{{else}}女{{end}}
						</td>
					</tr>
					<tr>
						<td class="genre">手机号码</td>
						<td>{{.info.mobile}}
						<td class="genre">微信号</td>
						<td>{{.info.wechat}}
						<td class="genre">邮箱</td>
						<td>{{.info.mail}}
					</tr>
					<tr>
						<td class="genre">详细地址</td>
						<td colspan="5">
							{{.info.address}}
						</td>
					</tr>
					<input type="hidden" name="id" value="{{.info.id}}">
					<input name="uid" type="hidden" value="{{.info.uid}}">
					{{else}}
					<tr>
						<td class="genre" colspan="2">选择业务员</td>
						<td colspan="3" class="genre" style="position: relative;">
							<input type="text" class="input95 searchCustomer" placeholder="输入要添加的业务员名字或电话">
							<div class="drop-down"></div>
						</td>
						<input name="uid" type="hidden" id="uid">
					</tr>
					{{end}}
					<tr>
						<td class="genre" colspan="2">筛选</td>
						<td class="genre" colspan="6"><input class="input95 search" placeholder="按昵称或电话搜索客户"></td>
					</tr>
					<tr>
						<td class="condition" colspan="8">
							<span class="on">全部</span>
							<span>普通会员</span>
							{{range .vip}}
							<span>{{.name}}</span>
							{{end}}
						</td>
					</tr>
					<tr>
						<td class="genre" colspan="8">添加客户</td>
					</tr>
					<tr>
						<td colspan="8" class="addcustomer-wrap">
							
						</td>
					</tr>
					<tr>
						<td class="genre" colspan="8">已选客户</td>
					</tr>
					<tr>
						<td colspan="8" class="removecustomer-wrap">
							
						</td>
					</tr>
			</form>
				<tr class="trbutton">
						<td colspan="2"><button type="button" class="button">保存</button></td>
						<td colspan="6">
							<p>
								<i class="iconfont">&#xe649;</i> 请检查内容确认发布的内容没有涉及传播谣言、政治话题或违反广告法夸大宣传产品等。
							</p>
							<div class="help">帮助
								<div class="help_qr"><img src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/all/qr-code.jpg" alt=""></div>
							</div>
						</td>
					</tr>
			</table>
		</div>
	</article>
</section>

<footer><!-- 系统监控内容 --></footer>
<script src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/admin/js/jquery.jedate.min.js"></script>
<script src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/admin/js/toast.js"></script>
<script src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/admin/js/uppic.js"></script>
<script src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/admin/js/xcConfirm.js"></script>
<script src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/admin/js/app.js"></script>
<script>
	var member = {{.member}}
	var uids = {{.info.uids}}
	var copymember = member
	var timer = null
	var timer1 = null
	var addArr = []
	var business = null
	if (uids) {
		var uidsarr = uids.split(',')
		addArr = member.filter(function (v) {
			return uidsarr.some(function (uid) { return uid === v.id })
		})
		rendercustomer(addArr)($('.removecustomer-wrap'))
	}
	$('.searchCustomer').on('input',function () {
		var val = $(this).val().trim()
		clearTimeout(timer)
		if (!val) {
			$('#uid').val('')
			business = null
			$('.search').trigger('input')
			return $('.drop-down').html('')
		}
		timer = setTimeout(function () {
			var res = seek(member)(val)
			var html = ''
			res.map(function (v) {
				html += '<div data-id="'+ v.id +'">'+ v.monicker +'</div>'
			})
			$('.drop-down').html(html)
		}, 300)
	})
	function seek(gather) {
		return function (val) {
			var arr = []
			var inc = include(val)
			gather.map(function (v) {
				inc(v.mobile) ? arr.push(v) 
					: inc(v.monicker) ? arr.push(v) : ""  
			})
			return arr
		}
	}
	function include(val) {
		var reg = new RegExp(val)
		return function (final) {
			return reg.test(final)
		}
	}
	$('.drop-down').on('click', 'div', function () {
		var id = $(this).attr('data-id')
		business = member.find(function (v) {
			return v.id === id
		})
		var name = $(this).html()
		$('.searchCustomer').val(name)
		$('#uid').val(id)
		$('.drop-down').html('')
		$('.search').trigger('input')
		var index = addArr.findIndex(function (v) {
			return v.id === id
		})
		if (index !== -1) {
			addArr.splice(index, 1)
			rendercustomer(addArr)($('.removecustomer-wrap'))
		}
	})
	$('.search').on('input', function () {
		var val = $(this).val().trim()
		clearTimeout(timer1)
		if (!val) {
			return $('.addcustomer-wrap').html('')
		}
		timer1 = setTimeout(function () {
			var res = seek(copymember)(val)
			rendercustomer(res)($('.addcustomer-wrap'), 'addcustomer')
		}, 300)
	})
	$('.addcustomer-wrap').on('click', '.customer', function () {
		var id = $(this).attr('data-id')
		var item = member.find(function (v) {
			return v.id === id
		})
		addArr.push(item)
		$(this).remove()
		rendercustomer(addArr)($('.removecustomer-wrap'))
	})
	$('.removecustomer-wrap').on('click', '.customer', function () {
		var id = $(this).attr('data-id')
		var index = addArr.findIndex(function (v) {
			return v.id === id
		})
		addArr.splice(index, 1)
		$(this).remove()
		$('.search').trigger('input')
	})
	function rendercustomer(data) {
		return function (el, className) {
			var html = ''
			var isAddHave = isContain(addArr)
			var className = className ? className : ''
			data.map(function (v) {
				if (className === 'addcustomer') {
					if (isAddHave(v) || business === v) { return }
				}
				html += '<div data-id="'+ v.id +'" class="customer '+ className +'" title="添加  '+ v.monicker +'('+ v.vipName +')  电话:'+ v.mobile +'">' +
							'<span>'+ v.monicker +'</span>' +
							'<span class="func"></span>'
				html += className === 'addcustomer' ? '' : '<input type="hidden" name="uids" value='+ v.id +'>'
				html += '</div>'
			})
			el.html(html)
		}
	}
	function isContain(arr) {
		return function (item) {
			return arr.some(function (v) {
				return v === item
			})
		}
	}

	$('.condition').on('click', 'span', function () {
		if ($(this).hasClass('on')) {
			return
		}
		var val = $(this).html()
		$(this).addClass('on')
		$(this).siblings().removeClass('on')
		if (val === '全部') {
			copymember = member
		} else {
			copymember = member.filter(function (v) {
				return v.vipName === val
			})
		}
		$('.search').trigger('input')
	})

	$('.button').click(function(){
		if ($('#uid').length && !$('#uid').val()) {
			window.wxc.xcConfirm("请选择业务员","info"); return false;
		}
		var form=$('form').serialize()
		$.ajax({
			url:window.location.href,
			data:form,
			type:'post',
			success:function(res){
				if(res.status==1){
					 window.wxc.xcConfirm("保存成功","success",{onClose:function(){
                        window.location.href = document.referrer
                    }})
				}else {
					 window.wxc.xcConfirm("保存失败,请重试!","error")
				}
			}
		})
	});
</script>
</body>
</html>
